// import moment from 'moment';
import React, { forwardRef, useState } from 'react'
import { Form, Input, Select, InputNumber, DatePicker ,Cascader} from 'antd'
// import './userfrom.scss'
import moment from "moment";
// import "moment/locale/zh-cn"
import  city  from "@/utils/citydata2" 
import 'moment/locale/zh-cn'
const { Option } = Select
const UserForm = forwardRef((props, ref) => {
  // console.log("props===", props);

  let { regionList } = props;
  // console.log(props.regionList._i);
  // // ref
  // console.log("ref===", ref);


  // const signFrom = async () => {
  //   setTimeout(() => {

  //     ref.current.validateFields().then(value => {
  //       console.log(value);

  //     }).catch(err => {
  //       console.error(err)
  //     })
  //   }, 2000);
  // }
  // useEffect(() => {
  //   signFrom()
  // //   // if (ref) {
  // //   //   ref.setFieldsValue({
  // //   //     birth: ref.birth.moment().format()
  // //   //   });
  // //   // }
  // }, [])
  // useEffect(() => {
  //   if (ref) {
  //     ref.setFieldsValue({
  //       birth: moment(ref.birth)
  //     });
  //   }
  // }, [ref]);

  // const [isDisabled, setisDisabled] = useState(false)
  // const [selectedItems, setSelectedItems] = useState([]);
  // const filteredOptions = props.roleList.filter((o) => !selectedItems.includes(o));

  // useEffect(() => {
  //   console.log(isDisabled);
  //   setisDisabled(props.isUpdateDisabled)
  // }, [props.isUpdateDisabled])
  // const format = (value) => {
  //   return moment(value).format('yyyy-MM-DD')//将时间格式转成yyyy-MM-DD
  // }
  // var roleselect = ['超级管理员', '管理员', '用户']
  // var sexselect = [
  //   { id: 0, roleName: '女' },
  //   { id: 1, roleName: '男' },
  // ]
  // const patient = ['健康', '冠心病', '高血压', '气管炎', '偏头痛', '感冒', '支气管扩张', '肺炎'];
  // const [selectedItems, setSelectedItems] = useState([]);
  // const filteredOptions = patient.filter((o) => !selectedItems.includes(o));
  // 设置默认的起始日期
  // const disabledDate = (current) => {
  //   console.log(current.format('YYYY-MM-DD'))
  //   return current.format('YYYY-MM-DD')
  // }
  // const onChange = (date, dateString) => {
  //   console.log(date, dateString);
  // };
  // function onOk(value) {
  //   console.log('onOk: ', value);
  //   // value = moment(value).format('YYYY-MM-DD') //这么解决的
  // }
  // const dateFormat = 'YYYY-MM-DD';
  const formItems = regionList.map((item, index) => {
    const { type, label, model } = item;
    // let Component = {props.regionList.map((item, index) => {
    return (
      <div key={index}>

        {item.type == 'input' && <span>
          <Form.Item
            name={model}
            label={item.label}
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input  placeholder={'请输入'+item.label} />
          </Form.Item>
        </span>}
        {item.type == 'address' && <span>
        <Form.Item
         name={model}
          label={item.label}
          rules={[{ required: true, message: '请输入地址' }]}
        >
           <Cascader options={city}  placeholder={'请输入'+item.label} />
          {/* <Input /> */}
        </Form.Item>
        </span>}
        {item.type == 'date' && <span>
          <Form.Item
            name={model}
            label={label}
            rules={[{ required: true, message: '请选择质检时间' }]}
          >
            <DatePicker
              // showTime
              // inputReadOnly
              allowClear
            // format="YYYY-MM-DD"
            // onOk={onOk}
            // onChange={onChange}
            // allowClear={false}
            //  initialValues={moment().format('YYYY-MM-DD')} 
            //   format={(value) =>{
            //     return disabledDate(value);
            // }}
            // onChange={(value) =>{
            //     return disabledDate(value);
            // }}
            />
          </Form.Item>
        </span>}


      </div>

    )
    // })}
    // switch (type) {
    //   case 'input':
    //     Component =
    //       <Form.Item
    //         name="title"
    //         label={label}
    //         rules={[{ required: true, message: '请输入用户名' }]}
    //       >
    //         <Input />
    //       </Form.Item>
    //     break;
    //   case 'Select':
    //     Component = <Select item={item} key={label} />
    //     break;
    //   case 'DatePicker':
    //     Component = <DatePicker item={item} key={label} />
    //     break
    //   default:
    //     break;
    // }

    // return Component;
  })



  return (
    <Form
      ref={ref}
      title="horizontal"
      key={ref.id}
      labelAlign="left"
    >
      {/* {props.regionList.map((item,index)=>{
  return(
    <div key={index}>
      {item.name}
    </div>
})} */}
      {formItems}
      {/* {props.regionList.map((item, index) => {
        return (
          <div key={index}>

            {item.type == 'input' && <span>
              <Form.Item
                name="title"
                label={item.label}
                rules={[{ required: true, message: '请输入用户名' }]}
              >
                <Input />
              </Form.Item>
            </span>}
          </div>

        )
      })} */}
      {/* <div className='frombox'> */}
      {/* <div className='leftbox'> */}
      {/* <Form.Item
          name="title"
          label="质检人"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="address"
          label="区域种植地点"
          rules={[{ required: true, message: '请输入地址' }]}
        >
          <Input />
        </Form.Item> */}
      {/* <Form.Item
          name="birth"
          label="质检时间"
          rules={[{ required: true, message: '请选择质检时间' }]}
        >
          <DatePicker
            // showTime
            inputReadOnly
            allowClear
          // format="YYYY-MM-DD"
          // onOk={onOk}
          // onChange={onChange}
          // allowClear={false}
          //  initialValues={moment().format('YYYY-MM-DD')} 
          //   format={(value) =>{
          //     return disabledDate(value);
          // }}
          // onChange={(value) =>{
          //     return disabledDate(value);
          // }}
          />
        </Form.Item> */}

      {/* </div> */}
      {/* </div> */}







    </Form>
  )
})
export default UserForm